<script setup name="Home">
import { ref } from 'vue';
import Logo from "@/assets/logo.png";

const value = ref('');
const offset = ref({ x: 296, y: 476 });

const show = ref(false);

var infoData = [
  {
    id:1,
    name:'脆脆脆薯饼',
    time:'2024-8-16 17:59:50 星期五',
    images:'https://mcd-ninja-prod-1300270282.cos.ap-shanghai.myqcloud.com/pandora/%E5%9B%A2%E9%98%9F.png',
    message:'您好！'
  },
  {
    id:3,
    name:'脆脆脆薯饼',
    time:'2024-8-16 18:00:24 星期五',
    images:'https://mcd-ninja-prod-1300270282.cos.ap-shanghai.myqcloud.com/pandora/%E5%9B%A2%E9%98%9F.png',
    message:'请问有什么需要帮助的吗？'
  },
  {
    id:2,
    name:'我',
    time:'2024-8-16 18:00:05 星期五',
    images:'https://etracdn.mcdonalds.cn/library/b03a026c33db603684d887a6d313f760.png',
    message:'帮我推荐一份双人优惠套餐'
  },
]

var messages = ref('');
var nowDate = ref('');
var current = 2;
var infoList = ref(infoData);

const getSend = () => {
  if(messages == ''){
    showNotify('请输入咨询信息');
    return
  }
  let userData = {
    id:2,
    name:'发哥',
    time:nowDate,
    images:'https://img01.yzcdn.cn/vant/leaf.jpg',
    message:messages
  }
  infoData.push(userData)
  messages = ''
};
const	getSends = () => {
  if(messages == ''){
    showNotify('请输入咨询信息');
    return
  }
  let customerData = {
    id:4,
    name:'小巴',
    time:nowDate,
    images:'https://img01.yzcdn.cn/vant/cat.jpeg',
    message:messages
  }
  infoData.push(customerData)
  messages = ''
};

const	formatDate = () => {//当前时间 2021-4-23 18:00:24 星期五
  let date = new Date();
  let year = date.getFullYear(); // 年
  let month = date.getMonth() + 1; // 月
  let day = date.getDate(); // 日
  let week = date.getDay(); // 星期
  let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
  let hour = date.getHours(); // 时
  hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
  let minute = date.getMinutes(); // 分
  minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
  let second = date.getSeconds(); // 秒
  second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
  nowDate = `${year}-${month}-${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
}

const onClick = () => {
  // showToast('点击气泡');
  show.value = true;
};

</script>

<template>
  <div class="home">
    <van-image class="logo" width="100" height="100" :src="Logo" fit="cover" />
    
    <van-action-sheet 
      v-model:show="show" 
      style="height: 80%;"
      title="脆脆脆薯饼正在为您服务">
      <div id="chat" style="height: 100%;">
			<div class="chatBox">
				
				<div class="chatBox-middle">
					<div class="chatInfo" id="chatInfo">
						<div class="chatUser-box" v-for="(item,index) in infoList"  :key="index" :class="[current==item.id?'chatUser-box1':'chatUser-box']">
							<div class="chatUser-box-img">
								<van-image round width="2.5rem" height="2.5rem"
									:src="item.images" />
							</div>
							<div class="chatUser-info">
								<div class="chatUser-info-name" :class="[current==item.id?'chatUser-info-name1':'chatUser-info-name']"><span>{{item.name}}</span><span class="nowDate">{{item.time}}</span>
								</div>
								<div class="chatUser-info-text" :class="[current==item.id?'chatUser-info-text1':'chatUser-info-text']">
									<span>{{item.message}}</span>
								</div>
							</div>
						</div>
						
					</div>
				</div>
        
				<div class="chatBox-infoDesk">
					<div class="chatBox-textarea">
						<van-field v-model="messages" rows="4" type="textarea" placeholder="请输入咨询信息" />
					</div>
					<div class="chatBox-sendOut">
						<van-button class="sendOut" type="primary" @click="getSends">发送</van-button>
					</div>
				</div>
			</div>
		</div>

    </van-action-sheet>
    <van-floating-bubble
      axis="xy"
      icon="chat"
      v-model:offset="offset"
      magnetic="x"
      @click="onClick"
    />
  </div>
</template>
<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  align-items: center;

  .logo {
    margin-top: 30px;
  }

  .content {
    position: relative;
    padding: 16px 16px 340px;
  }
 
  #chat .chatBox {
    height: auto;
    margin: 2.5rem auto 0;
    background-color: #fff;
    overflow: hidden;
    border-radius: 0.625rem;
  }

  #chat .chatBox-top {
    width: 100%;
    height: 3.75rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background-color: #2B3D63;
  }

  #chat .chatBox-top-imgBox {
    margin-left: 1.25rem;
  }

  #chat .chatBox-top-text {
    margin-left: 1.25rem;
    font-size: 1rem;
    color: #fff;
  }

  #chat .chatBox-middle {
    width: 100%;
    height: 31.25rem;
    background-color: #fff;
    border-bottom: 0.0625rem solid #2B3D63;
  }

  #chat .chatBox-middle {
    width: 100%;
    height: 31.25rem;
    background-color: #fff;
  }

  #chat .chatBox-infoDesk {
    width: 100%;
    height: 10rem;
    position: fixed;
    bottom: 0;
  }

  #chat .chatBox-textarea {
    width: 100%;
    height: 6.25rem;
  }

  #chat .chatBox-sendOut {
    // margin-top: 0.625rem;
    width: 100%;
    height: 100%;
    text-align: right;
  }

  #chat .sendOut {
    padding: 0 1.25rem;
    height: 2.1875rem;
    margin: 0.3125rem 1.25rem 0 0;
  }

  #chat .chatInfo {
    width: 94%;
    height: 94%;
    margin: 1.25rem auto;
    overflow: auto;
  }

  #chat .chatUser-box {
    justify-content: flex-start;
    margin-bottom: 6px;
    display: flex;
    flex-direction: row;
  }
  
  
  #chat .chatUser-box-img {
    display: flex;
  }

  #chat .chatUser-info {
    margin: 0 1.25rem;
  }

  #chat .chatUser-info-name {
    font-size: 0.875rem;
    color: #888;
    display: flex;
    flex-direction: row;
  }

  #chat .nowDate {
    margin: 0 0.625rem;
  }

  #chat .chatUser-info-text {
    margin-top: 0.3125rem;
    max-width: 20rem;
    padding: 0.5rem;
    background-color: #E8E8E8;
    border-radius: 0.5rem;
    float: left;
    table-layout:fixed;
    word-break: break-all;
    overflow:hidden;
  }

  #chat .chatUser-info-text span{
    font-size: 0.9375rem;
    line-height: 1.5625rem;
  }
  #chat .chatUser-box1 {
    flex-direction: row-reverse;
  }
  #chat .chatUser-info-name1 {
    flex-direction: row-reverse;
  }
  #chat .chatUser-info-text1 {
    float: right;
  }
}
</style>
